<template>
	<view class="acupoint">
		<!-- 内部板块 -->
		<view class="body-show-box">
			<!-- 顶部标题头 -->
			<view class="top-title-box">
				<view class="title-text-box" :style="'padding-top:'+titleHeight+'rpx;'">
					<view class="back_pages"  @click="backPage">
						<u-icon size="35" name="arrow-leftward"></u-icon>
					</view>
					<view class="title-name-text">
						{{titleName}}
					</view>
				</view>
			</view>
			<!-- 身体部分 -->
			<view class="body-box-info" @click="goPart(item)" v-for="(item, index) in infoList" :key="index" :style="item.title == '' && item.infoName == ''?'display: none;':''">
				<view class="body-title">
					{{item.title}}
				</view>
				<!-- 文字类型 -->
				<view class="body-center-text"  v-if="item.type == 1">
					<text>{{item.infoName}}</text>
				</view>
				<!-- 图片类型 -->
				<view class="body-center-text" v-if="item.type == 2" style="text-align: center;">
					<image mode="widthFix" :src="item.imageUrl" style="width: 100%;max-width: 100%;"></image>
				</view>
			</view>
			<!-- 底部板块 -->
			<view class="bottom-box">
				<view class="bottom-left">
					<image class="bottom-left-img" mode="widthFix" src="../../../static/image/circle-of-friends.png"></image>
				</view>
				<view class="bottom-right-box">
					<view>广州市御一堂中医科技有限公司</view>
					<view style="margin:30rpx 0;">广州市番禺区恒达总部产业园B2栋202室</view>
					<view>全国服务热线：800-820-8820</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				// 标题头
				titleName: '',
				// 胶囊高度
				titleHeight: '',
				// 详情数据
				infoList: []
			}
		},
		onLoad(e) {
			// 标题头
			this.titleName = e.name
			// 胶囊高度
			this.getPhoneHeightStatus()
			// 获取穴位详情
			this.getAcupointInfo(e.id, e.name)
		},
		methods: {
			// 根据id和name  查询出穴位详情
			getAcupointInfo(fatherId, name){
				this.$api.request.getAcupointInfo({
					id: fatherId,
					name: name
				}, res => {					
					console.log(res);
					if(res.code == 200){
						this.infoList = res.data
					}
				})
			},
			
			
			// 获取导航栏的高度
			/**
			 * 获取手机状态栏高度
			 */
			getPhoneHeightStatus() {
				let systemInfo = uni.getSystemInfoSync();
				let pxToRpxScale = 750 / systemInfo.windowWidth; //px转换到rpx的比例
				let fontSize = systemInfo.fontSizeSetting * pxToRpxScale; // 用户设置的字体大小
				let statuHeight = systemInfo.statusBarHeight * pxToRpxScale; //状态栏的高度
				let titleHeight = 25 * pxToRpxScale; //导航栏高度，这个一般是固定的
				console.log(titleHeight);
				this.titleHeight = titleHeight
			},
			// 返回上一级页面
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 所属经络
			goPart(item){
				if(item.title == '【所属经络】'){
					this.$api.request.getFatherInfo({
						id: item.fatherThreeId,
						name: item.infoName
					},res => {
						if(res.code == 200){
							this.titleName = item.infoName
							this.infoList = res.data
						}
					})
				}
			}
		}
	}
</script>

<style>
	.acupoint{
		width: 100vw;
		height: 100vh;
		background-image: url("https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/jiudaifu/bgjingluo.jpg");
		background-size: 100% 100%;
		z-index: 99;
	}
	.body-show-box{
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.top-title-box{
		width: 100vw;
		height: 150rpx;
		background-image: url("https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/jiudaifu/top_bar.png");
	}
	
	.title-text-box{
		width: 100vw;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}
	
	.title-name-text{
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 auto;
	}
	
	.back_pages {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 30rpx;
		z-index: 99999;
	}
	
	.body-box-info{
		width: 100vw;
		display: flex;
		flex-direction: column;
		margin: 20rpx 0;
		border-bottom: 4rpx solid #ccc;
	}
	
	.body-title{
		text-indent: 16rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #29b258;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.body-center-text{
		background: rgba(246, 246, 242, 0.5);
		margin-bottom: 10rpx;
		padding: 10rpx;
		color: #333333;
		border: 0;
	}
	
	.bottom-box{
		width: 100vw;
		display: flex;
		flex-direction: row;
		margin-top: 60rpx;
		margin-left: 10rpx;
		margin-bottom: 30rpx;
	}
	
	.bottom-left{
		float: left;
		width: 20%;
	}
	.bottom-left-img{
		display: block;
		width: 100%;
	}
	.bottom-right-box{
		width: auto;
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		align-content: space-between;
		font-size: 24rpx;
	}
	
</style>
